<template>
	<view class="bg-white" style="padding-bottom: 30rpx;">
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="content">草稿箱编辑</block>

		</cu-custom>
		<view style="padding: 15px;">
			<form>
				<view>
					<image style="width: 100rpx;height: 100rpx;" :src="dataObj.avatar"></image>
				</view>
				<view class="cu-form-group">
					<view class="title">姓名</view>
<!--					<my-select range-key="text" value-key="value" dict-code="sys_user,realname,id" v-model="userId" />-->
          <my-seach-select range-key="text" value-key="value" dict-code="sys_user,realname,id" v-model="userId" />
				</view>
				<view class="cu-form-group margin-top" style="background-color: #E2E2E2;border-radius: 15px;">
					<view class="title">工号</view>
					<input disabled v-model="dataObj.workNo" placeholder="请输入" name="input"
						style="margin-left: 20px;"></input>
				</view>
				<view class="cu-form-group margin-top" style="background-color: #E2E2E2;border-radius: 15px;">
					<view class="title">公司</view>
					<input disabled v-model="dataObj.company_dictText" placeholder="请输入" name="input"
						style="margin-left: 20px;"></input>
				</view>
				<view class="cu-form-group margin-top" style="background-color: #E2E2E2;border-radius: 15px;">
					<view class="title">性别</view>
					<input disabled v-model="dataObj.sex_dictText" placeholder="请输入" name="input"
						style="margin-left: 20px;"></input>
				</view>
				<view class="cu-form-group margin-top" style="background-color: #E2E2E2;border-radius: 15px;">
					<view class="title">年龄</view>
					<input disabled v-model="dataObj.age" placeholder="请输入" name="input"
						style="margin-left: 20px;"></input>
				</view>
				<view class="cu-form-group margin-top" style="background-color: #E2E2E2;border-radius: 15px;">
					<view class="title">进厂时间</view>
					<input disabled v-model="dataObj.firstTimeWorking.replaceAll('-','/')" placeholder="请输入" name="input"
						style="margin-left: 20px;"></input>
				</view>
				<view class="cu-form-group margin-top" style="background-color: #E2E2E2;border-radius: 15px;">
					<view class="title">部门</view>
					<input disabled v-model="dataObj.post" placeholder="请输入" name="input"
						style="margin-left: 20px;"></input>
				</view>
				<view class="cu-form-group margin-top" style="background-color: #E2E2E2;border-radius: 15px;">
					<view class="title">车间</view>
					<input disabled v-model="dataObj.workshop" placeholder="请输入" name="input"
						style="margin-left: 20px;"></input>
				</view>
				<view class="cu-form-group margin-top" style="background-color: #E2E2E2;border-radius: 15px;">
					<view class="title">岗位</view>
					<input disabled v-model="dataObj.post" placeholder="请输入" name="input"
						style="margin-left: 20px;"></input>
				</view>
				<view class="cu-form-group margin-top" style="background-color: #E2E2E2;border-radius: 15px;">
					<view class="title">班次</view>
					<input disabled v-model="dataObj.classes" placeholder="请输入" name="input"
						style="margin-left: 20px;"></input>
				</view>
				<view class="cu-form-group margin-top" style="background-color: #E2E2E2;border-radius: 15px;">
					<view class="title">宿舍属性</view>
					<input disabled v-model="dataObj.roomType_dictText" placeholder="请输入" name="input"
						style="margin-left: 20px;"></input>
				</view>
				<view class="cu-form-group margin-top" style="background-color: #E2E2E2;border-radius: 15px;">
					<view class="title">楼栋</view>
					<input disabled v-model="dataObj.buildingId_dictText" placeholder="请输入" name="input"
						style="margin-left: 20px;"></input>
				</view>
				<view class="cu-form-group margin-top" style="background-color: #E2E2E2;border-radius: 15px;">
					<view class="title">楼层</view>
					<input disabled v-model="dataObj.floorId_dictText" placeholder="请输入" name="input"
						style="margin-left: 20px;"></input>
				</view>
				<view class="cu-form-group margin-top" style="background-color: #E2E2E2;border-radius: 15px;">
					<view class="title">宿舍号</view>
					<input disabled v-model="dataObj.roomCode" placeholder="请输入" name="input"
						style="margin-left: 20px;"></input>
				</view>
			</form>

			<view style="margin-top: 20px;">
				<view class="action" style="margin-bottom: 5px;">
					<text class="cuIcon-titles " style="color: #1E5EFF;"></text>
					<text style="color: #131314;font-size: 25rpx;font-weight: bold;">
						物品交接
					</text>
					<text @click="goodsListBtn"
						style="float: right;padding: 8rpx 20rpx;background-color: rgba(69, 145, 254, 1);border-radius: 10rpx;color:#FFFFFF;">
						新增
					</text>
				</view>
				<view style="padding: 10px;" v-for="(item,index) in goodsList" :key="index">
					<view
						style="padding: 15rpx 30rpx;background-color: rgba(237, 233, 233, 1);border-radius: 10px 10px 0px 0px;text-align: right;">
						<text @click="deleteGoodsList(index)" class="cuIcon-delete" style="color: #FF3B3B;"></text>
					</view>
					<view class="cu-form-group" style="background: #FAFAFA;">
						<view class="title">品名</view>
						<input name="input" v-model="item.name"></input>
					</view>
					<view class="cu-form-group" style="background: #FAFAFA;">
						<view class="title">规格</view>
						<input name="input" v-model="item.specs"></input>
					</view>
					<view class="cu-form-group" style="background: #FAFAFA;">
						<view class="title">单位</view>
						<input name="input" v-model="item.unit"></input>
					</view>
					<view class="cu-form-group" style="background: #FAFAFA;">
						<view class="title">数量</view>
						<input name="input" v-model="item.num"></input>
					</view>
					<view class="cu-form-group" style="background: #FAFAFA;">
						<view class="title">备注</view>
						<input name="input" v-model="item.remark"></input>
					</view>
				</view>
			</view>

			<uni-popup ref="submitFlag" background-color="#fff" :mask-click="false">
				<view
					style="text-align: center;background-color: #FFFFFF;padding: 11rpx;width: 580rpx;height: 470rpx;border-radius: 42rpx;">
					<view>
						<view class="submit-item">
							<image class="submit-icon" src="@/static/duihaoblue.png" />
						</view>
						<view style="margin-top: 28rpx;">
							<text class="submit-text">住宿申请已经提交</text>
						</view>
						<view style="color: rgba(150, 150, 150, 1); margin-top: 23rpx;">
							<text>已提醒审核人员进行审核</text>
						</view>
						<button @click="sureOne" style="border-radius: 20rpx; background-color: rgba(69, 145, 254, 1);
									color: rgba(255, 255, 255, 1);width: 300rpx;margin-top: 27rpx;">确定</button>
					</view>
				</view>
			</uni-popup>
			<uni-popup ref="draftsFlag" background-color="#fff" :mask-click="false">
				<view>
					<view
						style="text-align: center;background-color: #FFFFFF;padding: 11rpx;width: 580rpx;height: 470rpx;border-radius: 42rpx;">
						<view class="submit-item">
							<image class="submit-icon" src="@/static/drafts.png" />
						</view>
						<view style="margin-top: 28rpx;">
							<text class="submit-text">已保存进草稿箱</text>
						</view>
						<view style="color: rgba(150, 150, 150, 1); margin-top: 23rpx;">
							<text>您可以进入草稿箱查看</text>
						</view>
						<button @click="sureThree" style="border-radius: 20rpx; background-color: rgba(69, 145, 254, 1);
					color: rgba(255, 255, 255, 1);width: 300rpx;margin-top: 27rpx;">确定</button>
					</view>
				</view>
			</uni-popup>
		</view>
		<view style="display: flex;margin-top: 15px;justify-content: space-between;align-items: center;">
			<view @click="submit"
				style="padding: 30rpx 110rpx; margin-left: 20rpx;margin-top: 20rpx; background-color: rgba(30, 94, 255, 1);border-radius: 30rpx;color: #FFFFFF;">
				提交审核
			</view>
			<view @click="save"
				style="padding: 30rpx 110rpx;margin-left: 20rpx;margin-top: 20rpx;border-radius: 30rpx;background-color: rgba(255, 173, 4, 1); color: #FFFFFF;">
				保存
			</view>
		</view>

	</view>
</template>

<script>
	import moment from 'moment';
	export default {
		data() {
			return {
				id: '',
				userId: '',
				dataObj: {
					firstTimeWorking : ''
				},
				buildingId: '',
				floorId: '',
				roomCode: '',
				roomType: '',
				goodsList: [],
			}
		},
		mounted() {

		},
		onLoad: function(options) {
			this.id = options.id;
			this.userId = options.userId
		},
		computed: {

		},
		watch: {
			userId: {
				immediate: true,
				handler(val, old) {
					console.log("dataObject.userId值变化")
					console.log(val)
					console.log(old)
					this.userId = val;
					if (this.userId != '') {
						this.queryUserByUserId()
					}
				},
			},
			// async floorId(val, old) {
			// 	await this.getPickerSevenData();
			// },
			// async buildingId(val, old) {
			// 	await this.getPickerSevenData();
			// },
			roomType: {
				immediate: true,
				handler(val, old) {
					console.log(val)
					if (this.$refs.cascadeSelection) {
						this.$refs.cascadeSelection.getCascadeData(val);
						setTimeout(() => {
							this.$refs.cascadeSelection.setDataValue(this.roomCode);
						}, 500)
					}
				},
			},
			uniDataPicker: {
				immediate: true,
				handler(val, old) {
					if (val && val.length > 0) {
						this.buildingId = val[0].value
						this.floorId = val[1].value
						this.roomCode = val[2].text
					}
				},
			},
		},
		created() {
			this.getDetail()
		},
		methods: {
			getDetail() {
				this.$http.get(
						"/crm_dormitory_refund_application/crmDormitoryRefundApplication/queryDetail/" + this.id)
					.then(res => {
						if (res.data.success) {
							this.goodsList = res.data.result.handovers
						}
					})
			},
			queryUserByUserId() {
				this.$http.get('/crm_user/crmUser/queryById', {
					params: {
						id: this.userId
					}
				}).then(res => {
					console.log("res", res)
					if (res.data.success) {
						this.dataObj = res.data.result
						if(this.dataObj.firstTimeWorking == null){
							this.dataObj.firstTimeWorking = ''
						}
					}
				}).catch(err => {
					console.log(err);
				});
			},
			submit() {
				this.$http.put('/crm_dormitory_refund_application/crmDormitoryRefundApplication/edit', {
					"approvalStatus": "1",
					"handovers": this.goodsList,
					"id": this.id,
					"userId": this.userId,
				}).then(res => {
					if (res.data.success) {
						setTimeout(() => {
							this.$http.post(
									'/crm_dormitory_refund_application/crmDormitoryRefundApplication/submitTrial/' +
									this.id)
								.then(res => {
									if (res.data.success) {
										this.$refs.submitFlag.open('center')
									} else {
										this.$tip.toast('提交审核失败')
									}
								}).catch(() => {
									this.$tip.loaded();
									this.$tip.toast('提交审核失败')
								});
						}, 100)
					} else {
						this.$tip.toast(res.data.message)
					}
				}).catch(() => {
					this.$tip.loaded();
					this.$tip.toast('提交失败')
				});
			},
			sureOne() {
				this.$refs.submitFlag.close()
				uni.navigateTo({
					url: '/pages/pendingCheckoutRegistration/index'
				})
			},
			save() {
				this.$http.put('/crm_dormitory_refund_application/crmDormitoryRefundApplication/edit', {
					"approvalStatus": "1",
					"handovers": this.goodsList,
					"id": this.id,
					"userId": this.userId,
				}).then(res => {
					if (res.data.success) {
						this.$refs.draftsFlag.open('center')
					} else {
						this.$tip.toast(res.data.message)
					}
				}).catch(() => {
					this.$tip.loaded();
					this.$tip.toast('提交失败')
				});
			},
			sureThree() {
				this.$refs.draftsFlag.close()
				uni.navigateTo({
					url: '/pages/pendingCheckoutRegistration/pendingCheckoutRegistrationDrafts/index'
				})
			},
			//其他事项
			goodsListBtn() {
				this.goodsList.push({
					id: Math.floor(Math.random() * 10000000000000000000) + Date.now(),
					name: '',
					num: '',
					remark: '',
					specs: '',
					unit: '',
				})
			},
			deleteGoodsList(index) {
				this.goodsList.splice(index, 1);
			},
		}
	}
</script>

<style lang="scss" scoped>
	image {
		width: 100%;
		height: 100%;
	}

	.blackList {
		height: 100%;
		overflow: hidden;
	}

	.page-search {
		padding-left: 34rpx;
		margin-bottom: 12rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.search {
		width: 680rpx;
		height: 86rpx;
		background-color: rgba(249, 249, 249, 1);
		border-radius: 60rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding-left: 24rpx;
		padding-right: 24rpx;

		.search-left {
			width: 28rpx;
			height: 28rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.search-center {
			margin-left: 22rpx;
		}

		.search-placeholder {
			font-size: 28rpx;
			font-weight: 400;
			color: #7C7C7C;
		}


	}

	.filter-btn {
		width: 40rpx;
		height: 40rpx;
		margin-right: 42rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.page-content-main {
		height: calc(100% - 12rpx - 86rpx);
		border-top-left-radius: 64rpx;
		border-top-right-radius: 64rpx;
		padding: 26rpx 34rpx 0 34rpx
	}

	.select-box {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;

	}

	.select {
		width: 160rpx;
		height: 74rpx;
		border-radius: 60rpx;
		background-color: #4591FE;
		margin-bottom: 20rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin-right: 48rpx;
		position: relative;

		.select-value {
			font-size: 28rpx;
			font-weight: 400;
			color: #FFFFFF;
			margin-right: 18rpx;
		}

		.select-icon {
			width: 22rpx;
			height: 22rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			position: absolute;
			right: 20rpx;
			top: 25rpx;
		}
	}

	.list {
		height: calc(100% - 74rpx - 20rpx);
	}

	.list-item {
		border-radius: 28rpx;
		background-color: #FFFFFF;
		padding: 26rpx 24rpx 28rpx 20rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin-bottom: 26rpx;
		position: relative;

		.list-item-leftCenter {
			display: flex;
			flex-direction: row;
		}

		.list-item-left {
			width: 86rpx;
			height: 86rpx;
			margin-right: 26rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.list-item-center {
			.list-item-row {
				display: flex;
				flex-direction: row;
				margin-bottom: 20rpx;

				.list-item-name {
					color: #101317;
					font-size: 32rpx;
					margin-right: 16rpx;
				}

				.list-item-sex {
					width: 106rpx;
					height: 42rpx;
					border-top-right-radius: 40rpx;
					border-bottom-right-radius: 40rpx;
					border-bottom-left-radius: 20rpx;
					background-color: rgba(234, 171, 78, 0.35);
					line-height: 42rpx;
					text-align: center;
					color: rgba(255, 173, 4, 1);
					font-size: 24rpx;
				}

				.list-item-row-icon {
					width: 38rpx;
					height: 38rpx;
					margin-right: 10rpx;
					display: flex;
					justify-content: center;
					align-items: center;
				}

				.list-item-row-title,
				.list-item-row-value {
					font-size: 24rpx;
					font-weight: 400;
					color: #101317;
					line-height: 38rpx;
				}

			}
		}

		.list-item-btn {
			width: 36rpx;
			height: 36rpx;
			margin-top: 56rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.list-item-tab {
			width: 132rpx;
			height: 56rpx;
			text-align: center;
			line-height: 56rpx;
			background-color: rgba(69, 145, 254, 0.4);
			position: absolute;
			top: 0;
			right: 0;
			border-top-right-radius: 26rpx;
			border-bottom-left-radius: 20rpx;
		}

		.list-item-tab-text {
			font-size: 26rpx;
			color: rgba(69, 145, 254, 1)
		}
	}

	.nav-right-image {
		width: 80rpx;
		height: 80rpx;
		margin-left: 15px;
	}


	.cu-form-group {
		background-color: transparent;
	}

	::v-deep {
		.cu-form-group uni-picker .picker {
			color: #FFFFFF;
		}

		.cu-form-group uni-picker::after {
			opacity: 0;
		}
	}

	.textView {
		margin-left: 25px;
		font-size: 10px;
		margin-top: 5px;
	}

	.listText {
		width: 148rpx;
		height: 24rpx;
		font-size: 20rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #000000;
		line-height: 24rpx;
	}

	/deep/ .uni-radio-input {
		width: 10px;
		height: 10px;
	}

	.submit-icon {
		width: 118rpx;
		height: 118rpx;
		margin-top: 58rpx;
	}
</style>
